import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import ConfirmDialog from './ConfirmDialog/ConfirmDialog';
import Typography from '@mui/material/Typography';

import './index.scss'
import { useEffect, useRef, useState } from 'react';
import { getSeatsAPI } from '../../apis/seats';
import { setSeatId, setSeatSeatId } from '../../utils/localStorage/seat';
import { getRoomLocation } from '../../utils/localStorage/room';

const Reserve = () => {


    // 对话框对象
    const confirmDialog = useRef();

    const handleClickToOpenDialog = () => {
        confirmDialog.current.openDialog();
    }

    // 座位列表
    const [seatList, setSeatList] = useState([])

    // 获取座位列表
    const getSeatList = async () => {
        let res = await getSeatsAPI()
        console.log('获取座位列表', res);
        setSeatList(res.data)
    }

    useEffect(() => {
        getSeatList()
    }, [])


    return (

        <>
            <ConfirmDialog ref={confirmDialog} />
            <div className='reservePage'>
                <Paper elevation={3} style={{
                    width: '90vw',
                    margin: '0 auto'
                }}>
                    <Typography align='center' variant="h5" gutterBottom>
                        选择座位({getRoomLocation()})
                    </Typography>
                    <Grid container spacing={2} style={{
                        display: 'flex',
                        justifyContent: 'flex-start',
                        alignItems: 'center',
                        flexWrap: 'wrap',
                        margin: '0 auto'
                    }}>
                        {seatList.map((item, index) => <Grid key={item.id} style={{
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                            margin: '10px'
                        }} item xs={2}>
                            {item.status != 0 ? <Button variant="outlined" onClick={() => {
                                setSeatId(item.id)
                                setSeatSeatId(item.seatId)
                                handleClickToOpenDialog()
                            }}>
                                {item.seatId}号
                            </Button> : <Button variant="outlined" disabled onClick={() => {
                                setSeatId(item.id)
                                setSeatSeatId(item.seatId)
                                handleClickToOpenDialog()
                            }} color="error">
                                {item.seatId}号
                            </Button>}
                        </Grid>)}
                    </Grid>
                </Paper>
            </div>
        </>
    )
}

export default Reserve